<template>
	<!-- 商品下架管理 -->
	<view>
		<u-empty
			mode="data"
			icon="http://cdn.uviewui.com/uview/empty/data.png"
			text="暂无下架商品"
			v-show="commodityListEmptyShow"
		>
		</u-empty>
		<view class="commodity_list">
			<view class="commodity_item" v-for="item in commodityList">
				<image class="commodity_item_image" :src='`http://localhost:15000/fileManager/getImageById?id=` + item.imageId' mode=""></image>
				<view class="commodity_item_textbox">
					<p class="commodity_item_name">{{item.commodityName}}</p>
					<p class="commodity_item_remark">{{item.remark}}</p>
					<p class="commodity_item_amount">销售{{item.amount}}</p>
					<text class="commodity_item_price">
						￥{{item.price}}
					</text>
					<text class="commodity_item_priced">￥{{item.priced}}</text>
					<view class="commodity_item_btns">
						<u-button @click="hitDelete(item.id)" class="commodity_item_delete" type="error" :plain="true" text="删除"></u-button>
						<u-button @click="putawayCommodity(item.id)" class="commodity_item_outBtn" type="success" :plain="true" text="上架"></u-button>
					</view>
				</view>
			</view>
		</view>
		<!-- 消息提示 -->
		<u-notify ref="uNotify" message="Hi uView"></u-notify>
		<!-- 删除提示框 -->
		<u-modal
			:content="deleteContent"
			:show="deleteShow"
			showCancelButton
			buttonReverse
			@confirm="deleteCommodityById()"
			@cancel="() => deleteShow = false"
		></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 存放 商品信息列表
				commodityList: [],
				// 商品列表为空 显示
				commodityListEmptyShow: false,
				// 删除提示弹框
				deleteShow: false,
				// 删除提示框内容
				deleteContent: '确认删除？确认删除之后，将永久删除此商品',
				// 商品id
				commodityId: '',
			}
		},
		mounted () {
			// 初始化 根据店铺id获取下架商品
			this.getSoldOutCommodityByShopId()
		},
		methods: {
			// 点击 删除触发方法
			hitDelete (id) {
				this.commodityId = id
				this.deleteShow = true
			},
			// 根据id 永久删除商品信息
			deleteCommodityById () {
				this.$myRequest({
					url: '/eat-service/commodity/deleteCommodityById',
					method: 'delete',
					data: JSON.stringify(this.commodityId)
				}).then(res => {
					if (res.data.flag) {
						this.uNotify('删除成功', 'success')
						// 关闭 删除弹出框
						this.deleteShow = false
						// 刷新数据
						this.getSoldOutCommodityByShopId()
					} else {
						this.uNotify('删除失败，请稍后重试', 'warning')
					}
				})
			},
			// 根据店铺id获取下架商品
			getSoldOutCommodityByShopId () {
				this.$myRequest({
					url: '/eat-service/commodity/getSoldOutCommodityByShopId',
					data: {
						shopId: uni.getStorageSync('shopId'),
					},
				}).then(res => {
					this.commodityList = res.data.obj
					if (this.commodityList.length === 0) {
						this.commodityListEmptyShow = true
					} else {
						this.commodityListEmptyShow = false
					}
				})
			},
			// 商家商品
			putawayCommodity (id) {
				this.$myRequest({
					url: '/eat-service/commodity/putawayCommodity',
					methods: 'get',
					data: {
						id: id
					}
				}).then(res => {
					if (res.data.flag) {
						this.uNotify('上架成功', 'success')
						// 初始化刷新页面
						this.getSoldOutCommodityByShopId()
					} else {
						this.uNotify('上架失败，请稍后重试', 'warning')
					}
				})
			},
			// 定义消息提醒方法
			uNotify(message, type) {
				this.$refs.uNotify.show({
					top: 40,
					type: type,
					message: message,
					duration: 1000 * 3,
					fontSize: 20,
					safeAreaInsetTop:true
				})
			},
		}
	}
</script>

<style>
.commodity_list{
	width: 100%;
	float:left;
	margin-left: 2%;
}
.commodity_item{
	width: 100%;
	height: 120px;
	margin-top: 10px;
	position: relative;
}
.commodity_item_image{
	width: 100px;
	height: 100px;
	float:left;
}
.commodity_item_name{
	font-weight: bold;
}
.commodity_item_price{
	font-weight: bold;
}
.commodity_item_textbox{
	width: 62%;
	float:left;
	margin-left: 2%;
}
.commodity_item_remark{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
	color: #A2A0A1;
}
.commodity_item_amount{
	color: #A2A0A1;
}
.commodity_item_priced{
	font-size: 12px;
	text-decoration:line-through
}
.commodity_item_btns{
	position: absolute;
	bottom: 0;
	right: 10px;
	float:right;
}
.commodity_item_outBtn{
	width: 30%;
	float:right;
	margin-right: 10px;
}
.commodity_item_delete{
	width: 30%;
	float:right;
	margin-right: 10px;
}
</style>
